<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            display: inline-block;
            text-decoration: none;
            color: #000;
        }



        ul,
        li {
            list-style: none;
            margin-top: 20px;
        }

        ul {
            display: block;
            width: 400px;
            height: 400px;
            border: 1px solid pink;
        }

        .active {
            color: green;
        }

    </style>
</head>

<body>
    <div class="nav">
        <a href="/shipin" class="active">视频</a>
        <a href="/zhibo">直播</a>
    </div>
    <div class="content">

    </div>
</body>

</html>
<script>
    var as = document.querySelectorAll('a')
    as.forEach((item) => {
        item.onclick = function (e) {
            e.preventDefault()
            history.pushState({}, '', this.href)
            switch (location.pathname) {
                case '/shipin': shipin_page(); break
                case '/zhibo': zhibo_page(); break
            }
            for (let i = 0; i < as.length; i++) {
                as[i].classList.remove('active')
            }
            this.classList.add('active')
        }
    })



    function shipin_page() {
        document.querySelector('.content').innerHTML = `
        <ul>
            <li>恋情蹋光?李小璐带小鲜肉路旁摆拍._</li>
            <li>陈萌子肚破离婚传闻，炫耀小件买..</li>
            <li>赵本山徒弟的片酬，小沈阳片酬一年...</li>
            <li>者公比自己大的女明军，刘诗诗干艳...</li>
            <li>“十亿高婆” 李冰冰，3000万豪.../li>
            <li>被老外退货的8位女星,宁静遇家暴..</li>
        </ul>
        `
    }
    function zhibo_page() {
        document.querySelector('.content').innerHTML = `
        <ul>
            <li>直擒|双11全球快递“云监工”</li>
            <li>直播|邂逅绝美云海日出</li>
            <li>慢直播I天舟五号已到位，将于近日... .</li>
            <li>慢直播↓济南路实泉一天 下第- -泉</li>
            <li>直播|立冬拥抱暖阳</li>
            <li>慢直播:邂近绝美云海日出</li>
        </ul>
        `
    }
</script>